import { init } from 'snabbdom/build/init'
import { classModule } from 'snabbdom/build/modules/class.js'
import { propsModule } from 'snabbdom/build/modules/props.js'
import { styleModule } from 'snabbdom/build/modules/style.js'
import { eventListenersModule } from 'snabbdom/build/modules/eventlisteners.js'
import { h } from 'snabbdom/build/h'

const patch = init([classModule, propsModule, styleModule, eventListenersModule])

var vnode

var nextKey = 11
var margin = 8
var sortBy = 'rank'
var totalHeight = 0
var originalData = [
  { rank: 1, title: '战狼2', desc: '动作类型片，总票房 567877万，导演：吴京 发行公司：北京京西文化旅游股份有限公司', elmHeight: 0 },
  { rank: 2, title: '红海行动', desc: '动作类型片，总票房362435万，导演：林超贤 发行公司：霍尔果斯博纳文化传媒有限公司', elmHeight: 0 },
  { rank: 3, title: '唐人街探案2', desc: '喜剧类型电影，总票房：339509万，导演：陈思诚 发行公司： 霍尔果斯五洲电影发行有限公司', elmHeight: 0 },
  { rank: 4, title: '美人鱼', desc: '喜剧类型电影，总票房：339211万，导演：周星驰 发行公司：中国电影集团公司', elmHeight: 0 },
  { rank: 5, title: '速度与激情8', desc: '犯罪动作类型电影，总票房：267096万，导演：F·加里·格雷 F. Gary Gray 发行公司：中国电影集团公司', elmHeight: 0 },
  { rank: 6, title: '捉妖记', desc: '奇幻喜剧类型电影，总票房：244002万，导演：许诚毅 发行公司：中国电影集团公司', elmHeight: 0 },
  { rank: 7, title: '速度与激情7', desc: '动作犯罪类型电影，总票房：242658.6万，导演：温子仁 James Wan 发行公司：中国电影集团公司', elmHeight: 0 },
  { rank: 8, title: '捉妖记2', desc: '奇幻喜剧类型电影，总票房：223655万，导演：许诚毅 发行公司：安乐（北京）电影发行有限公司', elmHeight: 0 },
  { rank: 9, title: '羞羞的铁拳', desc: '喜剧/运动类型电影，总票房：220175万，导演：张吃鱼 宋阳 发行公司：天津猫眼文化传媒有限公司', elmHeight: 0 },
  { rank: 10, title:'变形金刚4：绝迹重生', desc: '科幻/动作/冒险，总票房：197752万，导演：迈克尔·贝 Michael Bay，发行公司：中国电影集团公司', elmHeight: 0 }
]
var data = [
  originalData[0],
  originalData[1],
  originalData[2],
  originalData[3],
  originalData[4],
  originalData[5],
  originalData[6],
  originalData[7],
  originalData[8],
  originalData[9],
]

function changeSort (prop) {
  sortBy = prop
  data.sort((a, b) => {
    if (a[prop] > b[prop]) {
      return 1
    }
    if (a[prop] < b[prop]) {
      return -1
    }
    return 0
  })
  render()
}

function add () {
  var n = originalData[Math.floor(Math.random() * 10)]
  data = [{ rank: nextKey++, title: n.title, desc: n.desc, elmHeight: 0 }].concat(data)
  render()
  render()
}

function remove (movie) {
  data = data.filter((m) => {
    return m !== movie
  })
  render()
}

function movieView (movie) {
  return h('div.row', {
    key: movie.rank,
    style: {
      opacity: '0',
      transform: 'translate(-200px)',
      delayed: { transform: `translateY(${movie.offset}px)`, opacity: '1' },
      remove: { opacity: '0', transform: `translateY(${movie.offset}px) translateX(200px)` }
    },
    hook: { insert: (vnode) => { movie.elmHeight = vnode.elm.offsetHeight } },
  }, [
    h('div', { style: { fontWeight: 'bold' } }, movie.rank),
    h('div', movie.title),
    h('div', movie.desc),
    h('div.btn.rm-btn', { on: { click: () => { remove(movie) } } }, 'x'),
  ])
}

function render () {
  data = data.reduce((acc, m) => {
    var last = acc[acc.length - 1]
    m.offset = last ? last.offset + last.elmHeight + margin : margin
    return acc.concat(m)
  }, [])
  totalHeight = data.length === 0
    ? 0
    : data[data.length - 1].offset + data[data.length - 1].elmHeight
  vnode = patch(vnode, view(data))
}

// 生成新的虛擬dom view
function view (data) {
  return h('div', [
    h('h1', '中国内地电影排行榜前10'),
    h('div', [
      h('a.btn.add', { on: { click: add } }, '新增'),
      '排序规则: ',
      h('span.btn-group', [
        h('a.btn.rank', { class: { active: sortBy === 'rank' }, on: { click: () => { changeSort('rank') } } }, '序号'),
        h('a.btn.title', { class: { active: sortBy === 'title' }, on: { click: () => { changeSort('title') } } }, '影片名'),
        h('a.btn.desc', { class: { active: sortBy === 'desc' }, on: { click: () => { changeSort('desc') } } }, '描述'),
      ]),
    ]),
    h('div.list', { style: { height: totalHeight + 'px' } }, data.map(movieView)),
  ])
}

window.addEventListener('DOMContentLoaded', () => {
  var container = document.getElementById('container')
  vnode = patch(container, view(data))
  render()
})